import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import BangumiCover from '@/components/BangumiCover'
import { bangumiApi } from '@/api'
import css from './related.module.scss'
export default class BangumiRelated extends PureComponent {
    static propTypes = {
        detailData: PropTypes.object.isRequired
    }

    state = {
        list: []
    }

    get seasonId() {
        return this.props?.detailData?.ssId ?? ''
    }

    getData = async () => {
        try {
            const { result } = await bangumiApi.getRelated({
                season_id: this.seasonId
            })
            if (result) {
                const { season } = result
                this.setState({
                    list: season.slice(0, 6)
                })
            }
        } catch (error) {
            
        }
    }

    needUpdate = (prevProps) => {
        const prevSSId = prevProps.detailData.ssId
        return prevSSId !== this.seasonId
    }

    componentDidMount() {
        this.getData()
    }

    componentDidUpdate(prevProps) {
        if(this.needUpdate(prevProps)) {
            this.getData()
        }
    }

    render() {
        const { list } = this.state
        return (
            <div className={css["wrap"]}>
                <div className={css["title"]}>更多推荐</div>
                {
                    list.map(item => {
                        return (
                            <BangumiCover 
                                key={item.season_id}     
                                id={item.season_id}                                 
                                title={item.title} 
                                cover={item.new_ep.cover || item.cover} 
                                play={item.stat.view} 
                                follow={item.stat.danmaku}
                            />
                        )
                    })
                }
            </div>
        )
    }
}
